<?php
require 'start.php';
echo pagetop();
?>
<div id="content"> 
  <div id="loading_page"> 
	<!-- Placeholder for page loader --> 
  </div> 
  <div id="page"> 
	<div id='hotspots'>
		<h3>HotSpots</h3>
		<img src='images/hotspot.jpg' alt='hotspot' class='hotspot' />
		<div id='messageRow' style='display:none;width:320px;margin:5px 0px;'></div>
		<div id='buttonRow' style='display:none;width:320px;margin:5px 0px;'>
		<div id='hotspotAddStatus' style='display:none;' ></div>
		Type: 	<select id='hotspotType'>
					<option value='Food Bowl'>Food Bowl</option>
					<option value='Play Area'>Play Area</option>
					<option value='Basket'>Basket</option>
				</select><br/>
		<input type='submit' value='Add' id='buttonAdd' />
		<input type='submit' value='Cancel' id='buttonCancel'/>
		</div>
		<ul id='hotspotlist'>
			<li><input type='submit' id='addLink' value='Add a new hotspot' /></li>
			<li><img src='images/red.png' alt='' class='hotspotcolour' />Basket - <a href=''>Edit</a> | <a href=''>Delete</a></li>
			<li><img src='images/blue.png' alt='' class='hotspotcolour' />Food Bowl - <a href=''>Edit</a> | <a href=''>Delete</a></li>
		</ul>
	<div id='hotspotBox' style='display:none'></div>
	</div>
  </div> 
</div>
<script>
function addLink() {
	$("#addLink").slideUp('slow');
	$("#messageRow").html("Click the top-left corner of your new hotspot.");
	$("#messageRow").slideDown('slow');
	$("#hotspotAddStatus").replaceWith('');
	}
function updateSize(e) {
	var w = e.pageX - parseFloat($('#hotspotBox').css('left'));
	var h = e.pageY - parseFloat($('#hotspotBox').css('top'));
	$('#hotspotBox').css('width',w);
	$('#hotspotBox').css('height',h);
	//add button row
	if($("#buttonRow").css('display') == 'none'){
		$("#buttonRow").slideDown('slow');
		
		//buttonRow bindings
		$("#buttonCancel").click(function (e) {
			$('#hotspotBox').replaceWith("<div id='hotspotBox' style='display:none'></div>");
			$("#buttonRow").slideUp('slow');
			$("#messageRow").slideUp('slow');
			$('#hotspots').append("<div id='hotspotAddStatus' style='display:none;' ></div>");
		$("#addLink").slideDown('slow');
		});
		$("#buttonAdd").click(function (e) {
			$('#hotspotBox').attr("id",'');
			$('#hotspots').append("<div id='hotspotAddStatus' style='display:none;' ></div>");
			$("#messageRow").slideUp('slow');
			setTimeout("$('#ajaxLoader').replaceWith('<img src=\"images/tick.jpg\" alt=\"\" id=\"ajaxLoader\" /><input type=\"submit\" id=\"addLink\" value=\"Add another\" />');$('#addLink').click(function (e) { addLink(); });",2000);
			setTimeout("$('#hotspotlist').append('<li><img src=\"images/green.png\" alt=\"\" class=\"hotspotcolour\" />"+$("#hotspotType option:selected").text()+" - <a href=\"\">Edit</a> | <a href=\"\">Delete</a></li>')",2000);
			$('#buttonRow').replaceWith("<div id='buttonRow' style='text-align:center;width:320px;'><img src='images/loading.gif' alt='' id='ajaxLoader' /></div>");
			
		});
	$("#messageRow").html("Enter info below to finish.");
	}
}

$("#addLink").click(function (e) {addLink();});
$(".hotspot").click(function (e) { 
	if($("#hotspotAddStatus").length == 0) {
		var x = e.pageX - this.offsetLeft;
		var y = e.pageY - this.offsetTop;
		if($('#hotspotBox').css('display') == 'none')
			{
			//new hotspot - first click
			$('#hotspotBox').replaceWith("<div id='hotspotBox' style='background:url(\"images/greenGlass.png\");height:20px;width:20px;position:absolute;top:"+e.pageY+";left:"+e.pageX+";'></div>");
			//bind update function
			$("#hotspotBox").click(function(e){updateSize(e);});
			//display message
			$("#messageRow").html("Now click the bottom-right corner.");
			$("#messageRow").slideDown("slow");
			}
		else{
			//update size
			updateSize(e);
			}
		}
		
    });
</script>
<?php
echo pagebottom();
?>